<template>
  <div class="container">
    <!-- 左侧导航栏 -->
    <div class="navigator-dv dv">
      <L-EChartsSelect></L-EChartsSelect>
    </div>

    <!-- 图表预览 -->
    <div class="charts-dv dv">
      <L-EChartsPreview ref="EchartPreview"></L-EChartsPreview>
    </div>

    <!-- 右侧配置栏 -->
    <div class="config-dv dv">
      <L-EChartsConfig></L-EChartsConfig>
    </div>
  </div>
</template>

<script setup lang="ts">
</script>

<style lang="less" scoped>
@navigator-width: 15vw;
@config-dv-width: 400px;

// 整体容器
.container {
  display: flex;
  width: 100vw;
  height: 100vh;
}

// 左边栏
.navigator-dv {
  width: @navigator-width;
  box-sizing: border-box;
  border-right: 1px solid #e9e9e9;
  background-color: #ffffff;
  z-index: 2;
}

// 图表展示区
.charts-dv {
  width: calc(100vw - @navigator-width - @config-dv-width);
  .fl();
}

// 配置栏
.config-dv {
  width: @config-dv-width;
  background-color: #ffffff;
  z-index: 2;
}
</style>
